<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="com.webside.points.wechat.Wechat"%>  
<%@page import="com.webside.points.wechat.Constant"%> 
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<%
	
	String  openId = (String)request.getSession().getAttribute("openId");
	String url = Constant.REALM_URL;
	
 %>
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" href="../css/amazeui.min.css">
  <link rel="stylesheet" href="../css/weui.css" />
  <link rel="stylesheet" href="../css/wap.css">
  <title>内容详情</title>
 <script src="../js/jquery.min.js"></script>
  <script type="text/javascript" src="../js/timeago.js"></script>
     <script type="text/javascript"
	src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
  <link rel="stylesheet" href="../css/dropload.css">
	<script src="../js/dropload.min.js"></script>
  <style type="text/css">
  		.pet_list_one_info_ico_right { width: 26px; height: 26px; float: right;} 
		.pet_list_one_info_ico_right img {width: 100%;border-radius: 50%;}
		.pet_list_one_info_name_right { color: #757575; float: right; font-size: 12px; height: 26px; line-height: 26px; margin-right:8px;}
		.pet_list_one_info_l_right { float: right;margin-top:10px;}
		
	.praise-input{
		padding: 2px 10px;
		background-color:white;
		border: 1px solid #D9D9D9;
		display:inline-block;
		border-radius:5px;
		cursor: pointer;
	}
	a{color:#757575;}
	.advertising-text{
		font-size:10px;
		border:1px solid #22ac38;
		color:#22ac38;
		border-radius:3px;
		padding:0px 2px;
	}

  </style>
  
  <script type="text/javascript"
	src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <style type="text/css">
		.bubble {
			float: left;
			display: block;
			background: #28aef5;
			line-height: 2.7rem;
			height: 2.7rem;
			border-radius: 1.3rem;
			
			min-width: 12rem;
			color: #fff;
			font-size: 1.0rem;
			text-decoration: none;
			position: relative;
			margin-right: 0.5rem;
			padding-bottom:10px;
			padding-left:20px;

		}
		.playTime{
			color:#969595;
			font-size:10px;
			margin-left:7px;
		}
	</style>
  <script type="text/javascript">
		var interval;
		var expertName;
		var expertDuty;
		
		function like(e,expertId,answerId,userId){
			//alert(e.tagName);
			$(e).attr("class","am-icon-thumbs-up");
			$(e).attr("onclick","removeLike(this,"+expertId+","+answerId+","+userId+")");
			$(e).next().attr("onclick","");
			$(e).css("color","#eb4f38");
			var count=parseInt($(e).text())+1;
			$(e).text(" "+count);
			//alert(expertId+"  "+answerId+" "+userId);
			var url="${ctx }/expert/updatePraise";
			$.post(url, {expertId:expertId,answerId:answerId,type:'like',userId:userId}, function(data, status, xhr){
				callbackCharge(data);
			},'json'); 
		}
		
		function disLike(e,expertId,answerId,userId){
			//alert(123);
			$(e).attr("class","am-icon-thumbs-down");
			$(e).attr("onclick","removedisLike(this,"+expertId+","+answerId+","+userId+")");
			$(e).prev().attr("onclick","");
			$(e).css("color","#eb4f38");
			var count=parseInt($(e).text())+1;
			$(e).text(" "+count);
			//alert(answerId+" "+userId);
			var url="${ctx }/expert/updatePraise";
			$.post(url, {expertId:expertId,answerId:answerId,type:'disLike',userId:userId}, function(data, status, xhr){
				callbackCharge(data);
			},'json'); 
		}
		
		function removeLike(e,expertId,answerId,userId){
			//alert(expertId+"  "+answerId+"  "+userId);
			$(e).css("color","#757575");
			$(e).attr("class","am-icon-thumbs-o-up");
			$(e).attr("onclick","like(this,"+expertId+","+answerId+","+userId+")");
			$(e).next().attr("onclick","disLike(this,"+expertId+","+answerId+","+userId+")");
			var count=$(e).text()-1;
			$(e).text(" "+count);
			var url="${ctx }/expert/removePraise";
			$.post(url, {expertId:expertId,answerId:answerId,type:'like',userId:userId}, function(data, status, xhr){
				callbackCharge(data);
			},'json'); 
		}
		
		function removedisLike(e,expertId,answerId,userId){
			$(e).css("color","#757575");
			$(e).attr("class","am-icon-thumbs-o-down");
			$(e).attr("onclick","disLike(this,"+expertId+","+answerId+","+userId+")");
			$(e).prev().attr("onclick","like(this,"+expertId+","+answerId+","+userId+")");
			var count=$(e).text()-1;
			$(e).text(" "+count);
			var url="${ctx }/expert/removePraise";
			$.post(url, {expertId:expertId,answerId:answerId,type:'disLike',userId:userId}, function(data, status, xhr){
				callbackCharge(data);
			},'json'); 
		}
		
		
		function wxConfig(){
		
			var url = "${ctx }/wechat/getWxSignatureByTicket";
			
			var href=window.location.href;
			var params = {"url":href};
			   
			$.post(url, params, function(data, status, xhr){
				callbackConfig(data);
			},'json');
		}
		wxConfig();
		function callbackConfig(data) {
			 wx.config({
			      debug: false,
			      appId: data.appId,
			      timestamp: data.timestamp,
			      nonceStr: data.noncestr,
			      signature: data.signature,  
			      jsApiList: [
					'checkJsApi',
					'onMenuShareTimeline',
					'onMenuShareAppMessage',
					'hideMenuItems'
			      ]
			  }); 
		}
		
		//检查接口是否能调用
		wx.ready(function () {
			wx.checkJsApi({
			    jsApiList: [
			        'playVoice',
			        'playVoice'
			    ],
			    success: function (res) {
			        // alert(JSON.stringify(res));
			        // alert(JSON.stringify(res.checkResult.getLocation));
			        if (res.checkResult.getLocation == false) {
			            alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
			            return;
			        }
			    }
			});
			var href=window.location.href;
			var title = $(".pet_list_one_bt").text();
			var url = "<%=url%>" +"images/share.jpg";
			var desc = "暂无专家回答";
			if(expertName!=null){
				//alert(expertName);
				desc = expertName+""+expertDuty+"在中穆问答首先回答了这个问题。【查看答案】";
			}
			
			//alert(desc);
			
			//分享给朋友圈
			wx.onMenuShareTimeline({
				title: title, // 分享标题
				link: href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: url, // 分享图标
				success: function () { 
					// 用户确认分享后执行的回调函数
				},
				cancel: function () { 
					// 用户取消分享后执行的回调函数
				}
			});
			//分享给朋友
			wx.onMenuShareAppMessage({
				title: title, // 分享标题
				desc: desc, // 分享描述
				link: href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: url, // 分享图标
				success: function () { 
					// 用户确认分享后执行的回调函数
				},
				cancel: function () { 
					// 用户取消分享后执行的回调函数
				}
			});
		});
	
   		$(function(){
	   		
			
			
			$(".answerCount").each(function(){
	   			 var id=$(this).attr("id");
				 var span=$(this);
				 //alert(data);
				 var url="${ctx}/answer/findByIssueId";
					$.post(url, {"issueId":id}, function(data, status, xhr){
						callback(data);
					},'json');
					function callback(data){
	
						var array = new Array();
						//遍历当前数组
						for(var i=0; i<data.length; i++){
							//如果当前数组的第i已经保存进了临时数组，那么跳过，
							//否则把当前项push到临时数组里面
							if(array.indexOf(data[i].expertId) == -1){
								array.push(data[i].expertId);
							}
						}
						
						
						$(".answerCount").text(array.length+"人回答");
		
					}
	   			 
	   	    });
			
			//时间转换为简单的文字
			//$(".timeago").timeago();	
			
			//时间转换为简单的文字
			
			$(".timeago").each(function(){
				var id = $(this).attr("id");
				var time = timeago(id);
				$(this).text(time);
			})	
			
   		})
   		

		
		//播放语音
		function playVoice(e){
			//关闭正在播放
			$(".answer").each(function(){
	   			 var data=this.children[0];
				 //console.log($(data).text());
				 if($(data).text()==" "){
					 stopVoice(data);
				 }
	   			 
				
	   	    });
			
			
			var recordTime=$(e).attr("id");
			
			var playTime=0;
			
			var voice = $(e).children()[0];
			voice.play();
			$($(e).children()[1]).text(" ");
			
			
			$(e).attr("onclick","stopVoice(this)");

			//$(e).removeClass("am-icon-volume-up");
			
			interval = setInterval(a, 1000);
			
			function a(){
				recordTime--;
			
				if(recordTime%2==0){
					$(e).removeClass("am-icon-volume-up");
					$(e).addClass("am-icon-volume-off");
				}else{
					$(e).removeClass("am-icon-volume-off");
					$(e).addClass("am-icon-volume-up");
				}
				
				$(e).next().text(recordTime+' " ')
				if(recordTime<0){
					stopVoice(e);
				}
				
			}
			
		}
		//暂停语音
		function stopVoice(e){

			$(e).removeClass("am-icon-volume-off");
			$(e).addClass("am-icon-volume-up");
			
			$(e).next().text($(e).attr("id")+' "')
			clearInterval(interval);
			var voice = $(e).children()[0];
			voice.load();
			$($(e).children()[1]).text("点击播放");
			$(e).attr("onclick","playVoice(this)");
		}

		//
		function previewImage(e){
			//
			var image = $(e).attr("id").replace("../","<%=url%>");
			//alert(image);
			var images=new Array();;
			
			var li = $(e).parent().children();
			for(var i=0;i<li.length;i++){
				images.push($(li[i]).attr("id").replace("../","<%=url%>"));
			}
			
			wx.previewImage({
				current: image, // 当前显示图片的http链接
				urls: images // 需要预览的图片http链接列表
			});
		}
		
		
		
		
		$(function(){
			// 页数
			var page = 0;
			// 每页展示多少个
			var size = 10;
			var issueId = $("#issueId").val();
			var userId = $("#userId").val();
			var expertId = $("#expertId").val();
			var mark = $("#mark").val();
			var title = $("#titleId").val();
			var image = $("#imageId").val();
			var link = $("#linkId").val();
			//var user = ${user};
			//alert();
			// dropload
			$('.content').dropload({
				scrollArea : window,
				loadDownFn : function(me){
					page++;
					// 拼接HTML
					var result = '';
					$.ajax({
						type: 'post',
						url: '../issue/findByIssue?page='+page+"&size="+size+"&issueId="+issueId,
						dataType: 'json',
						success: function(data){
							var arrLen = data.length;
							//alert(arrLen);
							if(arrLen > 0){
								expertName = data[arrLen-1].expertEntity.name
								expertDuty = data[arrLen-1].expertEntity.duty

								for(var i=0; i<arrLen; i++){
									 if(data[i].status==1){
										 result +=   '<div class="pet_comment_list_block" id="answer'+data[i].id+'">'
											+' <div class="pet_comment_list_block_l">'
											+'<a href="${ctx}/expert/findExpertInfo?expertId='+data[i].expertEntity.id+'"><img src="'+data[i].expertEntity.userEntity.headUrl+'" alt=""></a>'
											+'</div>'
											+' <div class="pet_comment_list_block_r">'
											+'<div class="pet_comment_list_block_r_info">'
											+'<span class="wechatId">'+data[i].expertEntity.userEntity.wechatId+'</span>'
											+'<span style="float:right;">';
											
											if(data[i].expertEntity.id==expertId){
												result=result.concat( '<a href="#" onclick="del('+data[i].id+','+userId+')" style="padding-right: 8px;">删除</a>')
											}
											 
											
											result=result.concat('</span>'
											+'</div>'
											+' <div class="answer" style="line-height:2.7rem;display:none;">'+data[i].answerContent+'</div>'
											+'<div class="weui-uploader__bd">'
											+'<ul class="weui-uploader__files" id="'+data[i].image+'">'
											+'</ul>'
											+'</div>'
											+'<div class="pet_comment_list_block_r_bottom">'
											+'<div class="pet_comment_list_bottom_info_l" style="font-size: 12px;padding-top:1px;"><span class="timeago">'+timeago(data[i].createDateFormat)+'</span></div>'
											+'<div class="pet_comment_list_bottom_info_r">')
											//alert(mark);
											if(mark=='issue'||mark==''){
												result=result.concat('<span class="likeId" id="'+data[i].id+'" title="'+data[i].expertId+','+data[i].id+','+userId+'">'
												+'<span class="am-icon-thumbs-o-up" id="like'+data[i].id+'"> '+data[i].likeMark+'</span>'
												+'<span class="am-icon-thumbs-o-down" id="disLike'+data[i].id+'"> '+data[i].dislikeMark+'</span>'
												+'</span>'
												+' <span> <a href="${ctx }/service/reward.jsp?expertId='+data[i].expertId+'&issueId='+issueId+'" class="reward">打赏</a></span>') 
											}
											if(data[i].expertEntity.id==expertId){
												result=result.concat('<input type="hidden" id="isAnswer" value="yes">')
											}
											
											result=result.concat('</div>'
											+'</div>'
											+'</div>'
										+'</div>')
										
										//alert(result);
										
										if(i==arrLen-1){
											if(image!=""){
												var html = '<div style="background: #fff;padding:5px 0px;">'
															+'<div>'+title+'</div>'
															+'<div><a href="'+link+'"><img src="'+image+'" style="width:100%;margin-top:5px;"></a></div>'
															+'<div> <span class="advertising-text">广告</span> </div>'
														+'</div>';
												result += html;
											}
										}
										
									 }
									
									
									
								}
								
							// 如果没有数据
							}else{
								// 锁定
								me.lock();
								// 无数据
								me.noData();
							}
							// 插入数据到页面，放到最后面
							$('.pet_pl_list').append(result);
							// 每次数据插入，必须重置
							me.resetload();
							
							 $(".answer").each(function(){
								 var data=$(this).text();
								var array=data.split(';');
								var localId=array[0];
								var recordTime=array[1];
								var time=recordTime+' "';
								 
								$(this).css("display","");
								 
								if(data.indexOf('.mp3')!=-1){
									
									var html="<span class='bubble am-icon-volume-up'  onclick='playVoice(this)' id='"+recordTime+"'><audio src="+localId+" ></audio><span style='padding-left:10px;'>点击播放</span></span> <span class='playTime'>"+time+" </span> <br />";
									$(this).html(html);
									
								}
							});
							
							$("span.likeId").each(function(){
								var array=$(this).attr("title").split(",");
								//alert(array);
								var answerId=$(this).attr("id");
								var span=$(this);
								var userId=$("#userId").val();
								//alert(answerId);
								//alert(userId);
								var url="${ctx }/like/findById";
								if(userId!=""){
									$.post(url, {answerId:answerId,userId:userId}, function(data, status, xhr){
										callback(data);
									},'json'); 
								}
								
								function callback(data){
									if(data!=null){
										//alert($(span).next().children());
										$($(span).children()[0]).attr("class",data.like);
										$($(span).children()[1]).attr("class",data.disLike);
										
										if(data.like=="am-icon-thumbs-up"){
											$($(span).children()[0]).css("color","#eb4f38");
											$($(span).children()[0]).attr("onclick","removeLike(this,"+array[0]+","+array[1]+","+array[2]+")")
											$($(span).children()[1]).attr("onclick","")
										}else{
											$($(span).children()[1]).css("color","#eb4f38");
											$($(span).children()[0]).attr("onclick","")
											$($(span).children()[1]).attr("onclick","removedisLike(this,"+array[0]+","+array[1]+","+array[2]+")")
										}
									}else{
										$($(span).children()[0]).attr("onclick","like(this,"+array[0]+","+array[1]+","+array[2]+")")
										$($(span).children()[1]).attr("onclick","disLike(this,"+array[0]+","+array[1]+","+array[2]+")")
									}
								}

								
							})
							
							
							var answer = $("#isAnswer").length;
							if(answer==1){
								$("#isAnswerId").text("补充回答");
							}
							
							//分享操作数据进行授权
							var openId = $("#openId").val();
							
							if(openId=='null&'){

								$("#isAnswerId").attr("href","#");
								$("#isAnswerId").attr("onclick","login()");
								
								$(".reward").attr("href","#");
								$(".reward").attr("onclick","login()");
								
								$(".am-icon-thumbs-o-up").attr("onclick","login()");
								$(".am-icon-thumbs-o-down").attr("onclick","login()");
							}
							
							
							 $(".weui-uploader__files").each(function(){
								 $(this).html("");
								var ul=$(this);
								var imageId = $(this).attr("id");
								if(imageId!=""){
									
									var array=imageId.split(";");
									for(var i=1;i<array.length;i++){
										//alert(array[i]);
										
										var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)" onclick="previewImage(this)" id="#value#"></li>';
										tmpl=tmpl.replace("#url#", array[i]);
										//alert(array[i]);
										tmpl=tmpl.replace("#value#", array[i]);
										//alert(tmpl);
										$(ul).append(tmpl);
									}
									
								}
						 });
							
						},
						error: function(xhr, type){
							//alert('Ajax error!');
							// 即使加载出错，也得重置
							me.resetload();
						}
					});
				}
			});
			
		});
		
		
		function login(){
			window.location.href="../wechat/getWeChatCode";
		}
		
		function del(answerId,userId){
			
			
			 $('#my-confirm').modal({
        relatedTarget: this,
        onConfirm: function(options) {
			var url="${ctx }/answer/delete";
			$.post(url, {answerId:answerId,userId:userId}, function(data, status, xhr){
				callback(data);
			},'json'); 
			function callback(data){
				//alert(data);
				if(data!=-1){
					$("#answer"+answerId).remove();
				}
			}	
        },
        // closeOnConfirm: false,
        onCancel: function() {

        }
      });
			


			
		}
		
		
    </script>
</head>
<body style="background:#ececec">
  <div class="pet_mian" >
  <input type="hidden" value="<%=openId %>&" id="openId" >
  <input type="hidden" value="${issueContent.id }" id="issueId" >
  <input type="hidden" value="${issueBottom.title }" id="titleId" >
  <input type="hidden" value="${issueBottom.link }" id="linkId" >
  <input type="hidden" value="${issueBottom.image }" id="imageId" >
   <!-- 问题 -->
    <div class="pet_content pet_content_list">
      <div class="pet_article_like">
        <div class="pet_content_main pet_article_like_delete">
          <div data-am-widget="list_news" class="am-list-news am-list-news-default am-no-layout">
            <div class="am-list-news-bd">
              <ul class="am-list">
                <!--缩略图在标题右边-->
                 <li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right">
					<div class="pet_list_one_info">
						<!--判断是否匿名并且不是自己提问-->
						 <c:if test="${issueContent.anonymity=='on' && issueContent.userId!=user.id}" >
								<!--判断是不是专家-->
							<c:if test="${mark==null && user.expertId==0||empty user}" var="anonymity">
								<div class="pet_list_one_info_l">
									<div class="pet_list_one_info_ico"><img src="../images/anonymity.jpg" alt=""></div>
									<div class="pet_list_one_info_name">匿名用户</div>
								</div>
							  </c:if>
						</c:if>
					   <c:if test="${anonymity==null||anonymity==false}">
							<div class="pet_list_one_info_l">
							   <div class="pet_list_one_info_ico"><img src="${issueContent.userEntity.headUrl }" alt=""></div>
							   <div class="pet_list_one_info_name">${issueContent.userEntity.wechatId }</div>
						   </div>
						</c:if>
					</div>
					<div class=" am-list-main">
						<h4 class="am-list-item-hd pet_list_one_bt"><a href="###" class="">${issueContent.issueContent }</a></h4>
						<div class="weui-uploader__bd">
							<ul class="weui-uploader__files" id="${issueContent.image}">
								
							</ul>
						</div>
						
					</div>
					<div style="color:#969595;font-size:1.0rem;margin-top:12px;"><span class="timeago" id="${issueContent.createDateFormat}"></span></div>
					 <c:if test="${mark=='answer' || mark==null}">
					    <!--只有教法或者对于专家-->
					 	 <c:if test="${user!=null&&issueContent.issueTypeId==user.expertEntity.expertType||user.expertEntity.expertType==1}">
							<div style="float: right;padding:3px 10px;background:#2ca146;border:1px solid #2ca146;border-radius: 5px;">
								<a href="${ctx }/service/character-issue.jsp?issueId=${issueContent.id}&openId=<%=openId %>&type=answer" style="color:white;font-size:1.4rem;" id="isAnswerId">我来回答</a>
						    </div>
					    </c:if>
					 </c:if>
               </li>
           </ul>
           </div>
           </div>
         </div>
      </div>
   </div>
	
	<!--问题与回答间广告-->
    <c:if test="${issueCenter!=null}">
		<div style="background: #fff;padding:5px;border-top:1px solid #f1f1f1;">
			<div>${issueCenter.title}</div>
			<div><a href="${issueCenter.link}"><img src="${issueCenter.image}" style="width:100%;margin-top:5px;"></a></div>
			<div> <span class="advertising-text">广告</span> </div>
		</div>
	</c:if>
  <!-- 回答 -->
   <div class="pet_comment_list">
   
     <div class="pet_comment_list_wap"><div class="pet_comment_list_title">
		<span>全部回答</span>
		
		<div style="color:#969595;font-size:1.1rem;display:inline-block;font-weight:normal;float:right;">
			<span class="answerCount" id="${issueContent.id}">0人回答</span> 
			<span>${issueContent.browseNumber }人浏览 </span>
			<span>${issueContent.rewardNumber }人打赏</span>
		</div>
	 </div>
      <div data-am-widget="tabs" class="am-tabs am-tabs-default pet_comment_list_tab content">
      <div class="am-tabs-bd pet_pl_list">
	   <input type="hidden" id="userId" value="${user.id}">
	    <input type="hidden" id="expertId" value="${user.expertId}">
		<input type="hidden" id="mark" value="${mark}">
		
      </div>

  </div>
  </div>
  </div>
	
      </div>
	  
	  <div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
  <div class="am-modal-dialog">
    <div class="am-modal-hd">提示</div>
    <div class="am-modal-bd">
      您确定要删除回答内容吗?
    </div>
    <div class="am-modal-footer">
      <span class="am-modal-btn" data-am-modal-cancel>取消</span>
      <span class="am-modal-btn" data-am-modal-confirm>确定</span>
    </div>
  </div>
</div>
	   
   <script src="../js/amazeui.min.js"></script>
  <script src="../js/text-calculation.js"></script>
</body>
  </html>